<!DOCTYPE html>
<html>
<head>
    <title>Task Timer</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    
    <link rel="stylesheet" type="text/css" href="style/styles.css" />
    <link rel="icon" type="image/png" href="style/images/icon-16.png" />
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/script.js"></script>
</head>
<body>
    <img src="style/images/ajax-loader.gif" id="loading" width="32" height="32" alt="Loading..." />
    <button id="options"><img src="style/images/gear.png" width="25" height="25" alt="Settings" /></button>
    
    <audio src="Deneb.ogg" id="sound" preload></audio>
    
    <header>
        <h1>Task Timer</h1>
        <h2>Use this tool to keep track of time that you spend on work, studies, or any other type of task.</h2>
    </header>
    
    <noscript>
        <strong>Enable JavaScript, fool!</strong><br />
        This web application wouldn't even begin to function without it.
    </noscript>
    
    <section id="out-of-date" class="note">
        <p>
            It appears that you are using an out-of-date browser that doesn't support localStorage or native JSON.<br />
            Please upgrade to a newer browser, or switch.<br />
            I recommend <a href="http://chrome.google.com/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, or 
            <a href="http://www.firefox.com/">Firefox</a>.
        </p>
    </section>
    
    <section id="notice" class="note">
        <button id="close-notice">Close</button>
        
        <p>
            Note: This only saves locally, on your computer, in your browser.<br />
            The data will be gone if you clear the data, or you move to a different computer/device.
        </p>
    </section>
    
    <section id="tasks">
        <span id="no-tasks">You haven't created any tasks yet!</span>
            
        <table id="task-list">
            <thead>
                <tr>
                    <th class="text">Task</th>
                    <th class="current">Time Spent</th>
                    <th class="goal">Goal</th>
                    <th class="progress">Progress</th>
                    <th class="options">Options</th>
                 </tr>
            </thead>
            <tbody></tbody>
        </table>
        
        <table id="new-task">
            <tr>
                <td>Name</td>
                <td>Goal (in hours)</td>
                <td></td>
            </tr>
            <tr>
                <td><input type="text" id="new-txt" class="field" placeholder="Task Name" title="Task Name" disabled /></td>
                <td><input type="number" id="new-goal" class="field" value="4" min="1" max="80" size="8" title="Goal Time" disabled /></td>
                <td><button id="new-btn" class="field" disabled>Add Task</button></td>
            </tr>
        </table>
    </section>
    
    <section id="nothing">
        <table id="template">
            <tr id="row-template" style="display: none;">
                <td class="text">Task</td>
                <td class="current">Time Spent</td>
                <td class="goal">Goal</td>
                <td class="progress"><progress max="100" value="0">0%</progress></td>
                <td class="options">
                    <button class="toggle">Start</button>
                    <button class="reset">Reset</button>
                    <button class="delete">Delete</button>
                </td>
            </tr>
        </table>
    </section>
    
    <footer>
        Created by <a href="http://gawdl3y.com/">Schuyler Cebulskie</a> | 
        <a href="http://code.google.com/p/simple-task-timer/issues/list" target="_blank">Report a bug</a><br />
        Have an idea? <a href="http://gawdl3y.com/suggest" target="_blank">Tell me</a>.
    </footer>
    
    <div id="modal-overlay" class="modal"></div>
    <div id="modal" class="modal">
        <div id="modal-contents">
            <h1>Settings</h1>
            <hr />
            
            <label><input type="checkbox" id="hide-notice" />Hide the notice box</label><br />
            <label><input type="checkbox" id="confirm-reset" />Ask to confirm when you attempt to reset a task</label><br />
            <label><input type="checkbox" id="confirm-delete" />Ask to confirm when you attempt to delete a task</label><br /><br />
            
            <label><input type="checkbox" id="play-sound" />Play a sound when a task reaches its goal</label><br />
            <select id="sound-type">
                <option value="1">Use the default sound</option>
                <option value="2">Use a custom sound</option>
            </select>
            <input type="text" id="custom-sound" placeholder="Custom Sound URL" /><br /><br />
            
            <label>Update the time of tasks every <input type="number" min="1" max="60" value="1" size="4" id="update-time" /> second(s)</label>
            
            <div id="modal-buttons">
                <button id="save-settings">Save</button>
                <button id="close-modal">Cancel</button>
            </div>
        </div>
    </div>
</body>
</html>
